<template>
  <div class="record-list" :class="{ 'grid-view': isGridView }">
    <el-card v-for="record in records" :key="record.id" class="record-item">
      <div class="record-header">
        <div class="user-info">
          <el-avatar :src="generateAvatar(record.user_info?.username)" />
          <div class="user-meta">
            <span class="username">{{ record.user_info?.username }}</span>
          </div>
        </div>
        <el-dropdown v-if="record.isOwner">
          <el-button type="text">
            <el-icon><More /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$emit('edit', record)">编辑</el-dropdown-item>
              <el-dropdown-item @click="$emit('delete', record)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="record-content">
        <div class="record-text" v-html="record.content"></div>
        <div class="record-tags">
          <el-tag
            v-for="tag in record.tags"
            :key="tag"
            size="small"
            effect="plain"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <div class="record-footer">
        <div class="record-stats">
          <div class="stat-item">
            <el-icon><Timer /></el-icon>
            {{ record.duration }}小时
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon>
            {{ record.score }}分
          </div>
        </div>
        <div class="record-actions">
          <el-button 
            type="text" 
            :class="{ 'is-liked': record.liked }"
            @click="handleLike(record)"
            :disabled="record.isOwner"
          >
            <el-icon>
              <Star v-if="!record.liked" />
              <StarFilled v-else />
            </el-icon>
            <span>{{ record.likes_count || 0 }}</span>
          </el-button>
          <el-button type="text" @click="handleCommentClick(record)">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ record.comments_count || 0 }}</span>
          </el-button>
        </div>
      </div>

      <div class="record-time">
        {{ formatTime(record.created_at) }}
      </div>
    </el-card>

    <!-- 评论弹窗 -->
    <el-dialog
      v-model="commentDialogVisible"
      title="评论"
      width="500px"
      :destroy-on-close="true"
      @open="handleDialogOpen"
    >
      <div class="comment-dialog-content">
        <div class="comments-list">
          <div v-if="currentRecord?.commentList?.length" class="comment-items">
            <div 
              v-for="comment in currentRecord.commentList" 
              :key="comment.id" 
              class="comment-item"
            >
              <el-avatar 
                :size="40" 
                :src="generateAvatar(comment.username)"
                class="comment-avatar"
              />
              <div class="comment-main">
                <div class="comment-user">{{ comment.username }}</div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-time">{{ comment.time }}</div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无评论" />
        </div>
        <div class="comment-form">
          <el-input
            v-model="commentContent"
            type="textarea"
            :rows="3"
            placeholder="写下你的评论..."
          />
          <div class="comment-form-footer">
            <el-button 
              type="primary" 
              @click="submitComment"
            >
              发表评论
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 16px;
}

.record-list.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.record-item {
  position: relative;
  padding-bottom: 24px;
}

.record-text {
  margin-bottom: 12px;
  line-height: 1.6;
}

.record-text :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0;
}

.record-text :deep(p) {
  margin: 8px 0;
}

.record-tags {
  margin-top: 12px;
}

.record-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.record-actions {
  display: flex;
  gap: 16px;
}

.record-actions .el-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.record-actions .el-button .el-icon {
  margin-right: 4px;
}

.is-liked {
  color: var(--el-color-primary);
}

.el-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item .el-icon {
  font-size: 16px;
}

.comment-dialog-content {
  display: flex;
  flex-direction: column;
  height: 60vh;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.comment-items {
  padding: 16px 0;
}

.comment-item {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-form {
  padding: 16px;
  background-color: var(--el-bg-color);
}

.comment-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.comment-tip {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

:deep(.el-dialog__body) {
  padding: 0;
  height: calc(60vh + 32px);
}

.comments-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-content {
  flex: 1;
}

.comment-user {
  font-weight: 500;
  margin-right: 8px;
}

.comment-text {
  color: var(--el-text-color-regular);
}

.comment-input {
  margin-top: 16px;
}

.comment-avatar {
  flex-shrink: 0;
  margin-right: 12px;
}

.comment-main {
  flex: 1;
}

.comment-user {
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.comment-text {
  color: var(--el-text-color-regular);
  line-height: 1.5;
  margin-bottom: 4px;
}

.comment-time {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 500;
  font-size: 15px;
  color: var(--el-text-color-primary);
}

.record-time {
  position: absolute;
  bottom: 12px;
  right: 20px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

<script setup>
import { ref, computed } from 'vue'
import { Timer, Star, StarFilled, ChatDotRound, More } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  records: {
    type: Array,
    required: true
  },
  isGridView: {
    type: Boolean,
    default: false
  },
  currentUserId: {
    type: [String, Number],
    required: true
  }
})

const emit = defineEmits(['edit', 'delete', 'like', 'comment', 'loadComments'])

const commentDialogVisible = ref(false)
const currentRecord = ref(null)
const commentContent = ref('')

// 处理评论图标点击
const handleCommentClick = async (record) => {
  currentRecord.value = record
  commentDialogVisible.value = true
  // 加载评论数据
  emit('loadComments', record)
}

// 处理对话框打开
const handleDialogOpen = () => {
  commentContent.value = ''
  if (currentRecord.value) {
    emit('loadComments', currentRecord.value)
  }
}

// 处理点赞
const handleLike = (record) => {
  if (record.isOwner) {
    ElMessage.warning('不能给自己的帖子点赞')
    return
  }
  emit('like', record)
}

// 提交评论
const submitComment = () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  emit('comment', {
    record: currentRecord.value,
    content: commentContent.value.trim()
  })
  
  commentContent.value = ''
  commentDialogVisible.value = false
}

// 生成头像
const generateAvatar = (username) => {
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${username}`
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
</script> 